<template>
  <div class="jaguar-view">
    <div class="jaguar-search">
      <!-- <el-form :inline="true" :model="searchForm" @submit.prevent>
          <el-form-item>
            <search-button :search="getData" />
            <reset-button :search-form="searchForm" :search="getData" />
          </el-form-item>
        </el-form> -->
    </div>

    <el-card class="jaguar-table">
      <el-table :data="tableData" v-loading="loading" table-layout="auto">
        <el-table-column prop="userId" label="用户">
          <template #default="scope">
            <span v-if="scope.row.userNickName">
              {{ scope.row.userNickName }}({{ scope.row.userAccount }})
            </span>
            <span v-else>{{ scope.row.userAccount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceId"
          label="终端设备（UID|名称|系统型号及版本|客户端版本|IP）"
          min-width="200px"
        >
          <template #default="scope">
            {{ scope.row.device.deviceUid }} |
            {{ scope.row.device.deviceName }} |
            {{ scope.row.device.deviceModel }}
            {{ scope.row.device.deviceSysVersion }} |
            {{ scope.row.device.deviceClientVersion }} |
            {{ scope.row.device.deviceIp }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="绑定时间" />
      </el-table>

      <table-page :page="page" :search="getData" />
    </el-card>
  </div>
</template>
<script>
import { fetchList } from '@/api/upms/userDevice'

export default {
  name: 'UserDevice',
  data() {
    return {
      loading: false,
      tableData: [],
      searchForm: {},
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      this.loading = true
      fetchList(
        Object.assign(
          {
            'orders[0].asc': false,
            'orders[0].column': 'id_',
            current: this.page.current,
            size: this.page.size,
          },
          this.searchForm
        )
      )
        .then((res) => {
          this.tableData = res.data.data.records
          this.page.total = res.data.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
